<template>
  <div class="tree_index">
    <ga-input-search placeholder="请输入搜索内容" v-model="treeSearch" />
    <Skeleton :rows="16" :loading="loading" style="width: 100%">
      <ga-tree
        ref="treeRef"
        :block-node="true"
        :data="bizTreeData"
        :field-names="{ key: 'id', title: 'name', children: 'children' }"
        :extra-mouseenter-show="true"
        :draggable="false"
        :default-selected-keys="['all']"
        class="biz-tree tree-node-title-text-block"
        :style="{ width: '100%' }"
        @drop="onDrop"
        @select="onBizModelSelect"
      >
        <template #drag-icon></template>
        <template #title="nodeData">
          <div class="tree-title-operation">
            <div class="tree-title-text">{{ nodeData.name }}</div>
            <div
              v-if="!['all', -1].includes(nodeData.id)"
              class="tree-title-extra"
            >
              <ga-space>
                <icon-edit
                  class="icon_color"
                  @click="$refs.bizModelEditRef.show(nodeData)"
                ></icon-edit>
                <icon-delete
                  class="icon_color"
                  @click="deleteBizModel(nodeData)"
                ></icon-delete>
                <icon-plus
                  class="icon_color"
                  v-if="1 === nodeData.type"
                  @click="
                    $refs.bizModelEditRef.show({
                      type: 2,
                      parent: nodeData.id,
                    })
                  "
                />
              </ga-space>
            </div>
          </div>
        </template>
      </ga-tree>
      <ga-link @click="$refs.bizModelEditRef.show({ type: 1 })">
        <template #icon>
          <icon-plus />
        </template>
        新增数据中心
      </ga-link>
    </Skeleton>
  </div>
  <bizModalEdit ref="bizModelEditRef" @change="fetchBizModelData" />
</template>

<script setup>
import { onMounted, h } from "vue";
import { ref, computed } from "vue";
import useTree from "./treeUtil";
import useLoading from "@/hooks/loading";
import UndistributedIcon from "@/assets/svg/undistributed.svg";
import AllClusterIcon from "@/assets/svg/all_cluster.svg";
import bizModalEdit from "./components/bizModalEdit.vue";
import { deleteModalWithRefresh } from "@/hooks/useWarningModal";
import { getBusinessModelList, deleteBusinessModelList } from "@/api/cluserMgmt";

const { setLoading, loading } = useLoading(false);
const baseTreeData = [
  {
    name: "全部集群",
    id: "all",
    draggable: false,
    icon: () => h(AllClusterIcon),
    isLeaf: true,
  },
  {
    name: "未分配集群",
    id: -1,
    draggable: false,
    icon: () => h(UndistributedIcon),
  },
];
const {
  search: treeSearch,
  treeData,
  setTreeData,
  onDrop,
} = useTree("id", "name", (dropData) => {
  const setSortData = [];
  dropData.forEach((item) => {
    setSortData.push(item.id, ...item.children.map((chi) => chi.id));
  });
  setSort(setSortData);
});
const bizTreeData = computed(() => {
  return [...baseTreeData, ...treeData.value];
});
// 获取业务模型列表
const fetchBizModelData = async () => {
  // setLoading(true);
  try {
    const { data } = await getBusinessModelList();
    setTreeData(data)
  } finally {
    // setLoading(false);
  }
};
// 删除
const deleteBizModel = (record) => {
  deleteModalWithRefresh(record, deleteBusinessModelList,() => fetchBizModelData())
};

const treeRef = ref(null);
const emits = defineEmits([
  'bizModelSelect'
]);
const onBizModelSelect = (selectedKeys, data) => {
  if (data.node.children && data.node.children.length > 0) {
    treeRef.value.expandNode(data.node.id, true);
  }
  const [key] = selectedKeys;
  emits('bizModelSelect',key)
};

onMounted(() => {
  fetchBizModelData()
});
</script>

<style scoped lang="scss">
.tree_index {
  :deep(.garco-tree-node) {
    padding-left: 4px;
  }
  :deep(.garco-spin) {
    width: 100%;
  }
  .biz-tree {
    margin-top: 8px;
    :deep(.garco-tree-node) {
      &:nth-of-type(1),
      &:nth-of-type(2) {
        .garco-tree-node-switcher {
          width: 0px !important;
          margin-right: 0px;
        }
      }
    }
    :deep(.garco-tree-node-is-leaf) {
      .garco-tree-node-switcher {
        width: 0px !important;
        margin-right: 0px;
      }
    }
  }
}
</style>
